<template>
    <div class="container" ref="header">
        <el-row>
            <el-col :span="24" :lg="6" class="header-col">
                <a href="/"><img class="header-logo" src="@/assets/logo.png"/></a>
            </el-col>
            <el-col :span="24" :lg="18" class="header-col">
                <div class="header-menu">
                    <header-menu v-for="(item,index) in menus" :menu="item" :key="index"/>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    import HeaderMenu from "./header-menu";

    const menus = [
        {
            label: '网站首页',
            url: '/',
        },
        // {
        //     label: '关于企业',
        //     url: '/',
        // },
        {
            label: '产品展示',
            url: '/product-list',
        },
        // {
        //     label: '新闻资讯',
        //     url: '/',
        // },
        // {
        //     label: '合作客户',
        //     url: '/',
        // },
        // {
        //     label: '荣誉资质',
        //     url: '/',
        // },
        // {
        //     label: '在线订单',
        //     url: '/',
        // },
        {
            label: '联系我们',
            url: '/contact',
        }
    ]

    export default {
        name: "basic-header",
        components: {HeaderMenu},
        data() {
            return {
                menus: menus,
                isHeaderLucency:false
            }
        },
        computed: {
            // ...mapGetters['isHeaderLucency']
        },
    };
</script>
<style lang="scss" scoped>
    .container {
        width: 100%;
        height: auto;
        background: #000000;
        z-index: 1000; //提升层级
        @supports (position: fixed) {
            position: fixed;
        }

        &-b {
            background: rgba(0, 0, 0, 0.99);
        }
    }

    .header-logo {
        height: 80px;
        margin: 12px 12px;
    }

    .header-menu {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        height: 100%;
        width: 400px;
        float: right;
    }

    @media screen and (min-width: 1200px) {
        .container {
            height: 100px;
        }
        .header-menu {
            height: 100px;
        }
    }

    .header-col {
        height: 100%;
    }
</style>